<template>
  <div class="dialog" v-if="props.visible" @click.stop="maskClose">
    <div
      @click.stop=""
      class="dialog_model"
      :style="{
        width: width,
        height: height
      }"
    >
      <span class="close_icon" @click="close">
        <svg
          focusable="false"
          data-icon="close"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
          fill-rule="evenodd"
          viewBox="64 64 896 896"
        >
          <path
            d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
          ></path>
        </svg>
      </span>
      <div class="title text_overflow2">{{ title }}</div>
      <div class="content">
        <slot></slot>
      </div>
      <div class="btn_box">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { withDefaults } from 'vue'
import { Props } from '@/types/dialog'
const emit = defineEmits<{
  close: [status?: boolean]
  submit: []
}>()
// 默认值
const props = withDefaults(defineProps<Props>(), {
  width: '50%',
  height: '50%',
  title: 'title',
  visible: true, // 控制弹窗显示隐藏
  closeOnClickModal: true // 控制点击遮罩是否关闭
})
const close = () => {
  emit('close', false)
}
const submit = () => {
  emit('submit')
}
const maskClose = () => {
  if (!props.closeOnClickModal) return
  emit('close', false)
}
</script>
<style lang="less" scoped>
.dialog {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;

  .btn_box {
    display: flex;
    justify-content: flex-end;
  }

  .dialog_model {
    position: relative;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 0;
    border-radius: 8px;
    box-shadow:
      0 6px 16px 0 rgba(0, 0, 0, 0.08),
      0 3px 6px -4px rgba(0, 0, 0, 0.12),
      0 9px 28px 8px rgba(0, 0, 0, 0.05);
    pointer-events: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
  }

  .close_icon {
    position: absolute;
    top: 17px;
    inset-inline-end: 17px;
    z-index: 1010;
    padding: 0;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition:
      color 0.2s,
      background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .close_icon:hover {
    color: rgba(0, 0, 0, 0.88);
    background-color: rgba(0, 0, 0, 0.06);
    text-decoration: none;
  }

  .content {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: auto;
    padding: 30px 20px;
  }

  .title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.88);
    word-wrap: break-word;
    padding-right: 15px;
    flex-shrink: 0;
  }
}
</style>
